<template>
	<div class="page">
		<div class="login">
			<el-tabs class="modify-tabs" v-model="tabActive">
				<el-tab-pane label="学生端登录" name="student">
					<StudentLogin></StudentLogin>
				</el-tab-pane>
				<el-tab-pane label="教师端登录" name="teacher">
					<TeacherLogin></TeacherLogin>
				</el-tab-pane>
			</el-tabs>
		</div>
	</div>
</template>
<script>
import StudentLogin from "./components/StudentLogin"
import TeacherLogin from "./components/TeacherLogin"
export default {
	components: { StudentLogin, TeacherLogin },
	inject: ['reload'],
	data() {
		return {
			tabActive: 'student',
		}
	},
	created() {},
	watch: {
		//监听路由地址的改变
		$route: {
			immediate:true,
			handler(newValue){
				console.log('newValue', newValue);
				if (newValue.query.action) {
					let tabActive = newValue.query.action
					if (tabActive && ['student', 'teacher'].includes(tabActive)) {
						this.tabActive = tabActive
					}
				}
			}
		}
	},

	methods: {

	},
}
</script>

<style lang="stylus" scoped>
.page 
	display flex
	justify-content center
	align-items center
	background url('~@/assets/images/login-bg.png')
	background-repeat no-repeat
	background-position center
	background-size cover
.modify-tabs /deep/
	// margin 0 0 0 90px
	.el-tabs__nav 
		padding-bottom 30px
	.el-tabs__active-bar
		height: auto;
		background unset
		text-align center
		bottom 0
		&::after 
			content " "
			display inline-block
			width: 70px !important;
			height 6px
			background: #FC6621;
			border-radius: 3px 3px 3px 3px;
	.el-tabs__nav-wrap::after 
		display none
	.el-tabs__header
		margin 0 0 41px 90px
	.el-tabs__item
		font-size: 20px;
		height 20px
		line-height: 20px;
		padding: 0 38px;
		color: #666;
		&.is-active
			color: #FC6621;
			font-weight: PingFangMedium500;
.login 
	uiBlock();
	display flex
	justify-content center
	flex-direction column
	padding 71px 140px 71px 140px
	margin: 10px 0;
.t1s {
	width: 1440px;
	min-width: 1440px;
	margin: auto;
	padding: 0;
}

.t1s .ipt {
	width: 260px;
	border-radius: 5px;
	background-color: coral;
	color: #fff;
	text-align: center;
	border: 1px solid transparent;
	font-weight: 900;
	margin-top: 10px;
	margin-left: 60px;
}

.t1s #tab-first {
	width: 720px;
	text-align: center;
}

.t1s #tab-second {
	width: 720px;
	text-align: center;
}

.t1s input {
	border: 1px #68696a solid;
	border-radius: 5px;
	height: 35px;
}

#tpl_for_iframe {
	margin-left: 40%;
}
#pwd{
	height: 35px;
	margin-top: 20px;
}

</style>
